/**
 * ECharts图表管理器
 */

const globalConfig = window.CONFIG;

class SimpleCharts {
    constructor() {
        this.charts = {}; // 存储图表实例
        this.chartConfigs = {}; // 存储图表配置
        this.dataCache = {}; // 缓存，按containerId分
        this.animationFrame = {};
    }

    /**
     * 创建折线图
     * @param {string} containerId - 容器ID
     * @param {string} title - 图表标题
     * @param {string} color - 线条颜色
     */
    createChart(containerId, title, color = '#007bff') {
        const container = document.getElementById(containerId);
        if (!container) {
            console.error(`找不到容器: ${containerId}`);
            return;
        }

        // 创建图表
        const chart = echarts.init(container);

        const option = {
            // 整体布局设置，让图表尽可能占满容器
            grid: {
                left: 5,    // 左边距最小化，只留出纵坐标标签空间
                right: 5,   // 右边距最小化
                top: 15,     // 上边距最小化
                bottom: 2,  // 下边距最小化，不显示横坐标标签所以可以很小
                containLabel: true  // 确保标签不会被裁剪
            },
            title: {
                text: title,
                textStyle: { fontSize: 14 },
                // 居中
                left: 'center',
            },
            // X轴配置 - 时间轴
            xAxis: {
                type: 'time',
                axisLabel: {
                    show: false  // 隐藏横坐标标签以节省空间
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: false  // 隐藏刻度线
                },
                splitLine: {
                    show: false  // 隐藏网格线
                }
            },
            
            // Y轴配置 - 连续值
            yAxis: {
                type: 'value',
                // min: -0.6,      // 设置固定最小值
                // max: 0.6,    // 设置固定最大值，请根据实际需求调整
                axisLabel: {
                    show: true,
                fontSize: 8,
                    color: '#666'
                },
                axisLine: {
                    show: true,
                lineStyle: {
                    color: '#ccc'
                }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
                }
            },
            
            // 系列数据配置
            series: [{
                type: 'line',
                smooth: true,  // 平滑曲线
                lineStyle: {
                    width: 2,
                    color: '#5470c6'
                },
                itemStyle: {
                    color: '#5470c6'
                },
                symbol: 'circle',
                symbolSize: 4,
                showSymbol: false,  // 默认不显示数据点，鼠标悬停时显示
                emphasis: {
                    focus: 'series'
                },
                // 示例数据 - 请替换为你的实际数据
                data: []
            }],
            
            // 工具提示配置
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                const timeStr = params[0].data[0];
                const value = params[0].data[1];
                return `时间: ${timeStr.getHours()}:${timeStr.getMinutes()}:${timeStr.getSeconds()}<br/>值: ${value.toFixed(3)}`;
                }
            },
            
        };

        chart.setOption(option);
        this.charts[containerId] = chart;

        // 初始化缓存
        this.dataCache[containerId] = []; // 单线缓存
        this.chartConfigs[containerId] = { 
            lines: [title],
            colors: [color],
            maxPoints: 100 };

        // 窗口大小改变时重新调整
        window.addEventListener('resize', () => chart.resize());
        
        return chart;
    }


     /**
     * 创建多条曲线图表
     * @param {string} containerId - 容器ID
     * @param {string} title - 图表标题
     * @param {Array} lines - 曲线配置数组 [{name: '曲线名', color: '颜色'}, ...]
     */
    createMultiLineChart(containerId, title, lines) {
        const container = document.getElementById(containerId);
        if (!container) {
            console.error(`找不到容器: ${containerId}`);
            return;
        }

        // 创建图表
        const chart = echarts.init(container);
        
        // 创建series数组
        const series = lines.map(line => ({
            name: line.name,
            type: 'line',
            data: [],
            itemStyle: { color: line.color },
            lineStyle: { 
                color: line.color, 
                width: 2 
            },
            smooth: true,
            symbol: 'none'
        }));

        // 配置选项
        const option = {
         
            legend: {
                data: lines.map(line => line.name),
                top: 25
            },
            // 整体布局设置，让图表尽可能占满容器
            grid: {
                left: 5,    // 左边距最小化，只留出纵坐标标签空间
                right: 5,   // 右边距最小化
                top: 15,     // 上边距最小化
                bottom: 2,  // 下边距最小化，不显示横坐标标签所以可以很小
                containLabel: true  // 确保标签不会被裁剪
            },
            title: {
                text: title,
                textStyle: { fontSize: 14 },
                // 居中
                left: 'center',
            },
            // X轴配置 - 时间轴
            xAxis: {
                type: 'time',
                axisLabel: {
                    show: false  // 隐藏横坐标标签以节省空间
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: false  // 隐藏刻度线
                },
                splitLine: {
                    show: false  // 隐藏网格线
                }
            },
            
            // Y轴配置 - 连续值
            yAxis: {
                type: 'value',
                // min: -0.6,      // 设置固定最小值
                // max: 0.6,    // 设置固定最大值，请根据实际需求调整
                axisLabel: {
                    show: true,
                fontSize: 10,
                    color: '#666'
                },
                axisLine: {
                    show: true,
                lineStyle: {
                    color: '#ccc'
                }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
                }
            },

            // 工具提示配置
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                const timeStr = params[0].data[0];
                const value = params[0].data[1];
                return `时间: ${timeStr.getHours()}:${timeStr.getMinutes()}:${timeStr.getSeconds()}<br/>值: ${value.toFixed(3)}`;
                }
            },
            
            series: series
        };

        chart.setOption(option);
        this.charts[containerId] = chart;

        // 存储配置信息
        this.dataCache[containerId] = lines.map(() => []);
        this.chartConfigs[containerId] = {
            lines: lines.map(line => line.name),
            colors: lines.map(line => line.color),
            maxPoints: 100,
        };

        // 窗口大小改变时重新调整
        window.addEventListener('resize', () => chart.resize());
        
        return chart;
    }


    /**
     * 添加数据点
     * @param {string} containerId - 容器ID
     * @param {number} value - 数据值
     */
    addData(containerId, value,timestamp = null) {

        const cfg = this.chartConfigs[containerId];
        if (!cfg) return;
        const time = timestamp || new Date();

        // 只负责把数据塞入缓存，并触发统一绘制调度
        let cache = this.dataCache[containerId];
        cache.push([time, value]);
        if (cache.length > cfg.maxPoints) cache.shift();

        this._requestDraw(containerId);
    }


     /**
     * 批量添加多条曲线的数据点
     * @param {string} containerId - 容器ID
     * @param {Object} values - 数据对象 {曲线名: 值, ...}
     * @param {Date} timestamp - 时间戳（可选）
     */
    addMultiData(containerId, values, timestamp = null) {

        // 只负责把数据塞入缓存，并触发统一绘制调度
        const cfg = this.chartConfigs[containerId];
        if (!cfg) return;
        const time = timestamp || new Date();
        let cache = this.dataCache[containerId];
        Object.entries(values).forEach(([lineName, value]) => {
            const idx = cfg.lines.indexOf(lineName);
            if (idx !== -1) {
                cache[idx].push([time, value]);
                if (cache[idx].length > cfg.maxPoints) cache[idx].shift();
            }
        });
        this._requestDraw(containerId);
    }


    /**
     * 清空图表数据
     * @param {string} containerId - 容器ID
     */
    clear(containerId) {
        if (!this.dataCache[containerId]) return;
        const cache = this.dataCache[containerId];
        if (Array.isArray(cache[0])) {
            cache.forEach(arr => arr.splice(0, arr.length));
        } else {
            cache.splice(0, cache.length);
        }
        this._requestDraw(containerId);
    }


    // requestAnimationFrame 异步批量绘制
    _requestDraw(containerId) {
        if (this.animationFrame[containerId]) return; // 已有调度就不再触发
        this.animationFrame[containerId] = requestAnimationFrame(() => {
            this._updateChart(containerId);
            this.animationFrame[containerId] = null;
        });
    }

    // 绘制图表
    _updateChart(containerId) {
        const chart = this.charts[containerId];
        
        if (!chart) return;
        const cfg = this.chartConfigs[containerId];
        const cache = this.dataCache[containerId];
        if (cfg.lines && cfg.lines.length > 1) {
            // 多线
            chart.setOption({
                series: cache.map(d => ({ data: d }))
            });
        } else {
            // 单线
            chart.setOption({
                series: [{ data: cache }]
            });
        }
    }

    /**
     * 初始化所有车辆图表
     */
    initVehicleCharts() {
        // 创建各种图表
        this.createMultiLineChart('comprehensive-chart', '综合监控', [
            {name: '车速', color: '#007bff'},
            {name: '方向盘角度', color: '#28a745'},
            {name: '油门', color: '#ffc107'},
            {name: '刹车', color: '#ff6961'},
            {name: '系统状态', color: '#17a2b8'}
        ]);
        this.createChart('chart-1', '油门', '#007bff');
        this.createChart('chart-2', '刹车触发状态', '#28a745');
        this.createChart('chart-3', '方向盘力矩', '#ffc107');
        this.createChart('chart-4', '方向盘角度', '#ffc107');
    }
}

// 创建全局实例
const charts = new SimpleCharts();

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    charts.initVehicleCharts();
});


// 创建实例
const chartsInstance = new SimpleCharts();

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    chartsInstance.initVehicleCharts();
});

// 导出接口对象
window.ChartsAPI = {

    // 创建单曲线图
    createChart: (containerId, title, color) => chartsInstance.createChart(containerId, title, color),

    // 创建多曲线图
    createMultiLineChart: (containerId, titles, colors) => chartsInstance.createMultiLineChart(containerId, titles, colors),

    // 添加单曲线图的单个数据点
    addData: (chartId, value,timestamp) => chartsInstance.addData(chartId, value,timestamp),

    // 添加多曲线图的单个数据点
    addMultiData: (chartId, values,timestamp) => chartsInstance.addMultiData(chartId, values,timestamp),
    
    // 清空图表
    clear: (chartId) => chartsInstance.clear(chartId),

    // 检查是否初始化完成
    isReady: () => Object.keys(chartsInstance.charts).length > 0
};